<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>疫情信息管理后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.mincopy.css}">
    <link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/metisMenu.css}">
    <link rel="stylesheet" th:href="@{/assets/css/typography.css}">
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">


</head>

<body>
<div id="preloader">
    <div class="loader"></div>
</div>
<!-- preloader area end -->
<!-- page container area start -->
<form id="form" action="/admin/riskData" method="post">
    <div class="page-container">

        <!-- sidebar menu area start -->
        <div class="sidebar-menu">
            <div class="main-menu">
                <div class="menu-inner" style="width: 100%; height: 500px; overflow: hidden;">
                    <nav>
                        <ul class="metismenu" id="menu">
                            <li class="active">
                                <a href="javascript:void(0)" aria-expanded="true">
                                    <span>疫情信息管理</span>
                                </a>
                                <ul class="collapse">
                                    <li><a th:href="@{/admin/data}">数据管理</a></li>
                                </ul>
                                <ul class="collapse">
                                    <li class="active"><a th:href="@{/admin/riskdata}">风险数据</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" aria-expanded="true">
                                    <span>用户管理</span>
                                </a>
                                <ul class="collapse">
                                    <li><a th:href="@{/userManger/toUserMessage}">用户信息</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:void(0)" aria-expanded="true">
                                    <span>管理员信息</span>
                                </a>
                                <ul class="collapse">
                                    <li><a th:href="@{/adminManger/message}">当前账号</a></li>
                                </ul>
                                <ul class="collapse" th:if="${roles} eq ROLE_ROOT">
                                    <li><a th:href="@{/root/toShow}">管理账号</a></li>
                                </ul>
                                <ul class="collapse" th:if="${roles} eq ROLE_ROOT">
                                    <li><a th:href="@{/root/toAdd}">增加管理员</a></li>
                                </ul>
                            </li>
                            <li><a th:href="@{/admin/logout}"><span>退出登录</span></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- sidebar menu area end -->
        <!-- main content area start -->
        <div class="main-content">
            <!-- header area start -->
            <div class="header-area">
                <div class="row align-items-center">
                    <!-- nav and search button -->
                    <div class="col-md-6 col-sm-8 clearfix">
                        <div class="nav-btn pull-left">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <br>
                        <br>


                        <div form-group>
                            <div>
                                <input name="auctionstarttime"
                                       type="text" id="star_time" class="nwinput" readonly="readonly" style="height: 30px" th:placeholder="'开始时间：'+${starTime}" onclick="selectDate(this,'yyyy-MM-dd hh:mm:ss')"/>

                                <input name="auctionendtime"
                                       type="text" id="end_time" class="nwinput" readonly="readonly" style="height: 30px" th:placeholder="'结束时间：'+${endTime}" onclick="selectDate(this,'yyyy-MM-dd hh:mm:ss')"/>
                                <a href="#" onclick='searchRiskPage()' class="btn btn-outline-info" style="height: 30px">确定</a>
                            </div>
                        </div>

                    </div>
                </div>

                <h4 style="color: red">当前的高风险地区</h4>
                <h5 th:text="${heightRiskArea}"></h5>
                <h4 style="color: orangered">当前的中风险地区</h4>
                <h5 th:text="${middleRiskArea}"></h5>

                <div id="chart1" style="width: 1000px;height:400px;"></div>


            </div>

            <input id="pageNum1" type="hidden" name="pageNum1" th:value="${pageNum1}">
            <input id="totalPages1" type="hidden" name="totalPages1" th:value="${totalPages1}">
            <input id="pageNum2" type="hidden" name="pageNum2" th:value="${pageNum2}">
            <input id="totalPages2" type="hidden" name="totalPages2" th:value="${totalPages2}">
            <input id="pageNum3" type="hidden" name="pageNum3" th:value="${pageNum3}">
            <input id="totalPages3" type="hidden" name="totalPages3" th:value="${totalPages3}">
            <input id="starTime" type="hidden" name="starTime" th:value="${starTime}">
            <input id="endTime" type="hidden" name="endTime" th:value="${endTime}">
            <input id="num" type="hidden" name="num" th:value="${num}">

            <h3>行程异常</h3>
            <div align="right" style="width: 100%">
                <a  class="btn btn-outline-info" style="height: 30px" th:href="@{'/admin/riskLocationExcel/'+${starTime}+'/'+${endTime}}" >导出</a>
            </div>
            <div class="table-responsive">
                <div class="span12">

                    <table class="table table-hover">
                        <tbody>
                        <tr align="center">

                            <td><h4>id</h4></td>
                            <td><h4>时间</h4></td>td>
                            <td><h4>手机号</h4></td>
                            <td><h4>学号/工号</h4></
                            <td><h4>联系人</h4></td>
                            <td><h4>联系人电话</h4></td>
                            <td><h4>身体状况</h4></td>
                            <td><h4>是否就医</h4></td>
                            <td><h4>是否隔离</h4></td>
                            <td><h4>是否在校</h4></td>
                            <td><h4>是否在莞</h4></td>
                            <td><h4>所在地</h4></td>
                            <td><h4>体温</h4></td>

                        </tr>
                        <tr th:each="data:${datalist1}" align="center">
                            <td th:text="${data.getId()}"></td>

                            <td th:text="${data.getDate()}"></td>
                            <td th:text="${data.getSno()}"></td>
                            <td th:text="${data.getTelephone()}"></td>
                            <td th:text="${data.getContacts()}"></td>
                            <td th:text="${data.getContacts_telephone()}"></td>
                            <td th:text="身体健康" th:if="${data.getBody()} == 0"></td>
                            <td th:text="发烧" th:if="${data.getBody()} == 1"></td>
                            <td th:text="咳嗽" th:if="${data.getBody()} == 2"></td>
                            <td th:text="头晕" th:if="${data.getBody()} == 3"></td>
                            <td th:text="腹泻" th:if="${data.getBody()} == 4"></td>
                            <td th:text="乏力" th:if="${data.getBody()} == 5"></td>
                            <td th:text="有两种及以上不良现象" th:if="${data.getBody()} == 6"></td>
                            <td th:text="已就医" th:if="${data.isIstreatment() eq true}"></td>
                            <td th:text="未就医" th:if="${data.isIstreatment() eq false}"></td>
                            <td th:text="已隔离" th:if="${data.isIsolated()} eq true"></td>
                            <td th:text="未隔离" th:if="${data.isIsolated()} eq false"></td>
                            <td th:text="在校" th:if="${data.isInschool()} eq true"></td>
                            <td th:text="不在校" th:if="${data.isInschool()} eq false"></td>
                            <td th:text="在莞" th:if="${data.isInguan()} eq true"></td>
                            <td th:text="不在莞" th:if="${data.isInguan()} eq false"></td>
                            <td th:text="${data.getLocation()}"></td>
                            <td th:text="${data.getTemperature()}"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination_area pull-right mt-5">
                    <ul>
                        <li><a  onclick="searchRiskPage()" >确定</a></li>
                        <li><input id="searchPageNum1" type="text" name="searchPageNum1" required="required" placeholder="输入页数跳转">
                        </li>

                        <li><a  onclick="firstPage1()" >首页</a></li>
                        <li><a  onclick="prePage1()" ><i class="fa fa-chevron-left"></i></a>
                        </li>
                        <li><a><span th:text="${pageNum1}"></span></a></li>
                        <li><a  onclick="nextPage1()" ><i class="fa fa-chevron-right"></i></a>
                        </li>
                        <li><a  onclick="lastPage1()" >尾页</a></li>
                    </ul>
                </div>
            </div>

            <h3>温度异常</h3>
            <div align="right" style="width: 100%">
                <a  class="btn btn-outline-info" style="height: 30px" th:href="@{'/admin/riskTemperatureExcel/'+${starTime}+'/'+${endTime}}" >导出</a>
            </div>
            <div class="table-responsive">
                <div class="span12">

                    <table class="table table-hover">
                        <tbody>
                        <tr align="center">

                            <td><h4>id</h4></td>
                            <td><h4>时间</h4></td>
                            <td><h4>学号/工号</h4></td>
                            <td><h4>手机号</h4></td>
                            <td><h4>联系人</h4></td>
                            <td><h4>联系人电话</h4></td>
                            <td><h4>身体状况</h4></td>
                            <td><h4>是否就医</h4></td>
                            <td><h4>是否隔离</h4></td>
                            <td><h4>是否在校</h4></td>
                            <td><h4>是否在莞</h4></td>
                            <td><h4>所在地</h4></td>
                            <td><h4>体温</h4></td>

                        </tr>
                        <tr th:each="data:${datalist2}" align="center">
                            <td th:text="${data.getId()}"></td>

                            <td th:text="${data.getDate()}"></td>
                            <td th:text="${data.getSno()}"></td>
                            <td th:text="${data.getTelephone()}"></td>
                            <td th:text="${data.getContacts()}"></td>
                            <td th:text="${data.getContacts_telephone()}"></td>
                            <td th:text="身体健康" th:if="${data.getBody()} == 0"></td>
                            <td th:text="发烧" th:if="${data.getBody()} == 1"></td>
                            <td th:text="咳嗽" th:if="${data.getBody()} == 2"></td>
                            <td th:text="头晕" th:if="${data.getBody()} == 3"></td>
                            <td th:text="腹泻" th:if="${data.getBody()} == 4"></td>
                            <td th:text="乏力" th:if="${data.getBody()} == 5"></td>
                            <td th:text="有两种及以上不良现象" th:if="${data.getBody()} == 6"></td>
                            <td th:text="已就医" th:if="${data.isIstreatment() eq true}"></td>
                            <td th:text="未就医" th:if="${data.isIstreatment() eq false}"></td>
                            <td th:text="已隔离" th:if="${data.isIsolated()} eq true"></td>
                            <td th:text="未隔离" th:if="${data.isIsolated()} eq false"></td>
                            <td th:text="在校" th:if="${data.isInschool()} eq true"></td>
                            <td th:text="不在校" th:if="${data.isInschool()} eq false"></td>
                            <td th:text="在莞" th:if="${data.isInguan()} eq true"></td>
                            <td th:text="不在莞" th:if="${data.isInguan()} eq false"></td>
                            <td th:text="${data.getLocation()}"></td>
                            <td th:text="${data.getTemperature()}"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination_area pull-right mt-5">
                    <ul>
                        <li><a  onclick="searchRiskPage()" >确定</a></li>
                        <li><input id="searchPageNum2" type="text" name="searchPageNum2" required="required" placeholder="输入页数跳转">
                        </li>

                        <li><a  onclick="firstPage2()" >首页</a></li>
                        <li><a  onclick="prePage2()" ><i class="fa fa-chevron-left"></i></a>
                        </li>
                        <li><a><span th:text="${pageNum2}"></span></a></li>
                        <li><a  onclick="nextPage2()" ><i class="fa fa-chevron-right"></i></a>
                        </li>
                        <li><a  onclick="lastPage2()" >尾页</a></li>
                    </ul>
                </div>
            </div>

            <h3>身体异常</h3>
            <div align="right" style="width: 100%">
                <a class="btn btn-outline-info" style="height: 30px" th:href="@{'/admin/riskBodyExcel/'+${starTime}+'/'+${endTime}}" >导出</a>
            </div>
            <div class="table-responsive">
                <div class="span12">

                    <table class="table table-hover">
                        <tbody>
                        <tr align="center">

                            <td><h4>id</h4></td>
                            <td><h4>时间</h4></td>
                            <td><h4>学号/工号</h4></td>
                            <td><h4>手机号</h4></td>
                            <td><h4>联系人</h4></td>
                            <td><h4>联系人电话</h4></td>
                            <td><h4>身体状况</h4></td>
                            <td><h4>是否就医</h4></td>
                            <td><h4>是否隔离</h4></td>
                            <td><h4>是否在校</h4></td>
                            <td><h4>是否在莞</h4></td>
                            <td><h4>所在地</h4></td>
                            <td><h4>体温</h4></td>

                        </tr>
                        <tr th:each="data:${datalist3}" align="center">
                            <td th:text="${data.getId()}"></td>

                            <td th:text="${data.getDate()}"></td>
                            <td th:text="${data.getSno()}"></td>
                            <td th:text="${data.getTelephone()}"></td>
                            <td th:text="${data.getContacts()}"></td>
                            <td th:text="${data.getContacts_telephone()}"></td>
                            <td th:text="身体健康" th:if="${data.getBody()} == 0"></td>
                            <td th:text="发烧" th:if="${data.getBody()} == 1"></td>
                            <td th:text="咳嗽" th:if="${data.getBody()} == 2"></td>
                            <td th:text="头晕" th:if="${data.getBody()} == 3"></td>
                            <td th:text="腹泻" th:if="${data.getBody()} == 4"></td>
                            <td th:text="乏力" th:if="${data.getBody()} == 5"></td>
                            <td th:text="有两种及以上不良现象" th:if="${data.getBody()} == 6"></td>
                            <td th:text="已就医" th:if="${data.isIstreatment() eq true}"></td>
                            <td th:text="未就医" th:if="${data.isIstreatment() eq false}"></td>
                            <td th:text="已隔离" th:if="${data.isIsolated()} eq true"></td>
                            <td th:text="未隔离" th:if="${data.isIsolated()} eq false"></td>
                            <td th:text="在校" th:if="${data.isInschool()} eq true"></td>
                            <td th:text="不在校" th:if="${data.isInschool()} eq false"></td>
                            <td th:text="在莞" th:if="${data.isInguan()} eq true"></td>
                            <td th:text="不在莞" th:if="${data.isInguan()} eq false"></td>
                            <td th:text="${data.getLocation()}"></td>
                            <td th:text="${data.getTemperature()}"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination_area pull-right mt-5">
                    <ul>
                        <li><a  onclick="searchRiskPage()" >确定</a></li>
                        <li><input id="searchPageNum3" type="text" name="searchPageNum3" required="required" placeholder="输入页数跳转">
                        </li>

                        <li><a  onclick="firstPage3()" >首页</a></li>
                        <li><a  onclick="prePage3()" ><i class="fa fa-chevron-left"></i></a>
                        </li>
                        <li><a><span th:text="${pageNum3}"></span></a></li>
                        <li><a  onclick="nextPage3()" ><i class="fa fa-chevron-right"></i></a>
                        </li>
                        <li><a  onclick="lastPage3()" >尾页</a></li>
                    </ul>
                </div>
            </div>

            <div class="main-content-inner">

            </div>
        </div>
        <!-- main content area end -->

    </div>
</form>
<script th:src="@{/assets/js/vendor/jquery-2.2.4.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/metisMenu.min.js}"></script>
<script th:src="@{/assets/js/scripts.js}"></script>
<script th:src="@{/js/riskdata.js}"></script>
<script th:src="@{/js/WebCalendar.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
</body>
<script type="text/javascript" th:inline="javascript">
    // 初始化ECharts组件到id为main的元素上

    let num = [[${num}]]
    console.log(num);

    let myChart = echarts.init(document.getElementById('chart1'));

    var data1 = []
    var data2 = []

    for(var i=0;i < num.length;i++){
        data1.push(num[i].days)
        data2.push(num[i].count)
    }
    // 定义图标的配置项
    let option = {
        title: {
            text: '身体异常数据'
        },
        tooltip: {},
        // x轴配置
        xAxis: {
            data: data1
        },
        // y轴配置
        yAxis: {},
        series: [{
            // 数据集（也可以从后端的Controller中传入）
            data: data2,
            // 图表类型，这里使用line，为折线图
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>
</html>